<template>
	 <el-table v-loading="loading" :data="data" :height="height" :border="border" :row-style="createRowStyle" style="width: 100%">
		<template #empty>
			<div style="padding:20px 0"><a-empty /></div>
		</template>
		<slot></slot>
	</el-table>
	<div class="pagination">
		<a-pagination
		show-size-changer
		v-model:current="page"
		v-model:pageSize="pageSize"
		:total="total"
		@change="pageChange"
		@showSizeChange="onShowSizeChange"
		/>
	</div>
</template>

<script>
import { onMounted, reactive, toRefs } from 'vue';
export default {
	name:'normal-table',
	props:{
		data:{
			type:Array,
			default(){
				return []
			}
		},
		page:{
			type:Number,
			default:1
		},
		pageSize:{
			type:Number,
			default:10
		},
		total:{
			type:Number,
			default:0
		},
		loading:{
			type:Boolean,
			default:false
		},
		height:null,
		border:{
			type:Boolean,
			default:false
		},
		rowClassName:{
			type:[Function,String],
			default:null
		},
		striped:{
			type:[Boolean,String],
			default:null
		}
	},
	emits:{
		onSizeChange:payload=>{
			return payload
		},
		onPageChange:payload=>{
			return payload
		},
	},
	setup(props,context){

		function createRowStyle({row,rowIndex}){
			if(props.striped){
				if(typeof props.striped == 'string'){
					let index = rowIndex + 1;
					return index %2 == 0?'background:'+props.striped:""
				}else if(typeof props.striped == 'boolean'){
					let index = rowIndex + 1;
					return index %2 == 0?'background:#fafafa':""
				}
			}
		}

		function onShowSizeChange(current, size){
			context.emit('onSizeChange',size)
		}

		function pageChange(page){
			context.emit('onPageChange',page)
		}

		return {
			onShowSizeChange,
			pageChange,
			createRowStyle
		}
	}
}
</script>

<style lang="scss" scoped>
.pagination{
	margin-top: 20px;
	text-align: right;
}
</style>
